/* =========================================
   OAKSTONE FINANCIAL LTD
   NAVIGATION + FOOTER THEME
========================================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family:
        Inter,
        "Open Sans",
        sans-serif;
}

/* =========================================
   ROOT VARIABLES
========================================= */

:root {

    --bg-primary: #0f1115;
    --bg-secondary: #171a21;
    --bg-card: #1d212b;

    --text-primary: #f5f7fa;
    --text-secondary: #b7bcc8;
    --text-muted: #8d93a1;

    --accent: #d4af37;
    --accent-hover: #e5c766;

    --border: rgba(255,255,255,0.08);

    --shadow:
        0 10px 35px rgba(0,0,0,0.35);

    --transition: 0.3s ease;

    --radius-md: 16px;
}

/* =========================================
   BODY
========================================= */

body {

    background:
        linear-gradient(
            180deg,
            #0f1115 0%,
            #141821 100%
        );

    color: var(--text-primary);

    overflow-y: scroll;
}

body::-webkit-scrollbar {
    display: none;
}

/* =========================================
   NAVBAR
========================================= */

.Nav-Top,
.Nav-Bottom {

    position: fixed;

    width: 100%;

    z-index: 1000;

    backdrop-filter: blur(14px);

    background:
        rgba(15,17,21,0.88);

    border-bottom:
        1px solid var(--border);
}

.Nav-Top {
    top: 0;
}

.Nav-Bottom {
    bottom: 0;
}

.Nav-Bar {

    width: 100%;

    overflow: hidden;

    padding:
        0.5rem
        1rem;
}

/* Navbar Items */

.Nav-Bar .Nav-Bar-Item {

    float: left;

    display: block;

    width: auto;

    padding:
        14px
        18px;

    border: none;

    outline: 0;

    text-decoration: none;

    color: var(--text-secondary);

    transition: var(--transition);

    font-size: 0.95rem;

    font-weight: 600;

    letter-spacing: 0.3px;
}

/* Logo */

.Nav-Wide {

    letter-spacing: 3px;

    font-weight: 800;

    color: white !important;
}

/* =========================================
   NAVBAR LOGO
========================================= */

.Nav-Logo-Wrapper {

    display: flex !important;

    align-items: center;

    gap: 0.75rem;

    width: fit-content;

    text-decoration: none;
}

/* =========================================
   LOGO TEXT STACK
========================================= */

.Nav-Logo-Text {

    display: flex;

    flex-direction: column;

    justify-content: center;

    line-height: 1.1;
}

/* Main Title */

.Nav-Logo-Title {

    font-size: inherit;

    font-weight: inherit;

    letter-spacing: inherit;

    color: white;
}

/* Subtitle */

.Nav-Logo-Subtitle {

    font-size: 0.68rem;

    font-weight: 500;

    letter-spacing: 1.2px;

    text-transform: uppercase;

    color: var(--accent);

    margin-top: 0.2rem;
}

/* =========================================
   MOBILE LOGO TEXT
========================================= */

@media (max-width: 600px) {

    .Nav-Logo-Subtitle {

        font-size: 0.52rem;

        letter-spacing: 0.8px;
    }
}

.Nav-Logo {

    height: 2.4em;

    width: auto;

    object-fit: contain;

    transition: var(--transition);

    flex-shrink: 0;
}

/* Text */

.Nav-Logo-Wrapper span {

    font-size: inherit;

    font-weight: inherit;

    letter-spacing: inherit;

    line-height: 1;
}

/* Hover Effect */

.Nav-Logo-Wrapper:hover .Nav-Logo {

    transform: scale(1.04);
}

/* =========================================
   MOBILE LOGO
========================================= */

@media (max-width: 600px) {

    .Nav-Logo {

        height: 2em;
    }

    .Nav-Logo-Wrapper {

        gap: 0.55rem;
    }
}

/* Right Side */

.Nav-Right {
    float: right !important;
}

/* Button Style */

.Nav-Button {

    border-radius: 999px;

    cursor: pointer;

    white-space: nowrap;
}

.Nav-Button:hover {

    background:
        rgba(212,175,55,0.12);

    color: var(--accent) !important;
}

/* Card Effect */

.Nav-Card,
.Nav-Card-2 {

    box-shadow:
        0 8px 30px rgba(0,0,0,0.25);
}

/* White Class Override */

.Nav-White,
.Nav-Hover-White:hover {

    color: var(--text-primary) !important;

    background:
        transparent !important;
}

/* Anchor Offset Fix */

#Pricing,
#Services,
#Who-We-Help,
#About-Section,
#contact {
    scroll-margin-top: 120px;
}

/* =========================================
   RESPONSIVE NAVIGATION
========================================= */

@media (max-width: 600px) {

    .Nav-Hide-Small {
        display: none !important;
    }
}

@media (min-width: 601px) and (max-width: 992px) {

    .Nav-Hide-Medium {
        display: none !important;
    }
}

@media (min-width: 993px) {

    .Nav-Hide-Large {
        display: none !important;
    }
}

/* =========================================
   SIDEBAR
========================================= */

.Nav-Sidebar {

    height: 100%;

    width: 280px;

    position: fixed !important;

    z-index: 2000;

    overflow: auto;

    background:
        rgba(15,17,21,0.98);

    backdrop-filter: blur(14px);

    border-right:
        1px solid var(--border);

    box-shadow:
        0 15px 40px rgba(0,0,0,0.45);
}

/* Sidebar Items */

.Nav-Bar-Block .Nav-Bar-Item {

    width: 100%;

    display: block;

    padding:
        18px
        24px;

    text-align: left;

    border: none;

    white-space: normal;

    float: none;

    outline: 0;

    color: var(--text-secondary);

    text-decoration: none;

    transition: var(--transition);
}

.Nav-Bar-Block .Nav-Bar-Item:hover {

    background:
        rgba(212,175,55,0.08);

    color: var(--accent);
}

/* Sidebar Black Override */

.Nav-Black,
.Nav-Hover-Black:hover {

    color: white !important;

    background:
        rgba(15,17,21,0.98) !important;
}

/* Sidebar Animation */

.Nav-Animate-Left {

    position: relative;

    animation: animateleft 0.35s ease;
}

@keyframes animateleft {

    from {
        left: -320px;
        opacity: 0;
    }

    to {
        left: 0;
        opacity: 1;
    }
}

/* Misc */

.Nav-Large {
    font-size: 1.1rem !important;
}

.Nav-Padding-16 {

    padding-top: 16px !important;

    padding-bottom: 16px !important;
}

/* =========================================
   FOOTER
========================================= */

.breakline {

    height: 1px;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(212,175,55,0.5),
            transparent
        );
}

/* Footer Main */

footer {

    width: calc(100% - 40px);

    max-width: 1400px;

    margin: 40px auto 0;

    padding: 3rem;

    background:
        rgba(255,255,255,0.04);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border:
        1px solid rgba(255,255,255,0.08);

    border-radius: 24px;

    box-shadow:
        0 20px 60px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.08);

    overflow: hidden;

    position: relative;
}

footer::before {

    content: "";

    position: absolute;

    top: -150px;

    right: -150px;

    width: 300px;

    height: 300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(212,175,55,0.12),
            transparent 70%
        );

    pointer-events: none;
}

footer::after {

    content: "";

    position: absolute;

    bottom: -150px;

    left: -150px;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.04),
            transparent 70%
        );

    pointer-events: none;
}

/* Footer Columns */

#Footer-Left,
#Footer-Middle,
#Footer-Right {

    float: left;

    width: 33.33%;

    position: relative;

    z-index: 2;
}

/* Footer Text */

.Footer-Info {

    list-style: none;

    padding: 0.5rem 0;

    color: rgba(255,255,255,0.72);

    font-size: 0.95rem;

    text-align: center;

    line-height: 1.8;
}

/* Footer Links */

#Footer-Right a {

    position: relative;

    display: inline-block;

    color: rgba(255,255,255,0.75);

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

#Footer-Right a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            #d4af37,
            #f1d37c,
            #d4af37
        );

    transition: width 0.35s ease;

    box-shadow:
        0 0 10px rgba(212,175,55,0.45);
}

#Footer-Right a:hover {

    color: white;

    transform: translateY(-1px);
}

#Footer-Right a:hover::after {

    width: 100%;
}

/* Footer Bottom */

.footer-bottom {

    max-width: 1400px;

    margin: 0 auto 30px;

    padding: 1.5rem;

    text-align: center;

    background:
        rgba(255,255,255,0.02);

    backdrop-filter: blur(12px);

    border:
        1px solid rgba(255,255,255,0.04);

    border-radius: 18px;
}

.footer-bottom p {

    color: var(--text-muted);

    font-size: 0.9rem;
}

.Footer-Heading {

    color: white;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;

    font-size: 0.8rem;

    margin-bottom: 1rem;
}

/* =========================================
   MOBILE FOOTER
========================================= */

@media (max-width: 768px) {

    #Footer-Left,
    #Footer-Middle,
    #Footer-Right {

        float: none !important;

        width: 100%;

        text-align: center;

        margin-bottom: 2rem;
    }

    .Footer-Info {

        display: block;

        width: 100%;
    }

    .footer-bottom {

        text-align: center;
    }
}

/* =========================================
   MOBILE NAVBAR
========================================= */

@media (max-width: 600px) {

    .Nav-Bar {

        padding:
            0.5rem
            0.75rem;
    }

    .Nav-Bar .Nav-Bar-Item {

        padding:
            12px
            14px;
    }

    .Nav-Wide {

        font-size: 0.9rem;

        letter-spacing: 2px;
    }

    .Nav-Sidebar {

        width: 100%;
    }
}